<template>
  <div>
    <div>
      <el-form style="text-align: left" :model="searchMsg" status-icon :inline="true" ref="searchFrom"
               label-width="100px" class="demo-form-inline">
        <el-form-item label="客户姓名" prop="cname">
          <el-input v-model="searchMsg.cname"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="gname">
          <el-input v-model="searchMsg.gname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单日期" prop="gname">
          <el-date-picker
              v-model="searchMsg.ocreatetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态" prop="aflag">
          <el-radio v-model="searchMsg.aflag" label="0">处理中</el-radio>
          <el-radio v-model="searchMsg.aflag" label="1">已处理</el-radio>
        </el-form-item>
        <br>
        <el-form-item style="margin-left:  500px">
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button @click="restSearch()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
        ref="multipleTable"
        :data="alterSaleMsgs"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
      <el-table-column
          prop="serOrder.ouid"
          label="订单uid"
          width="200"
          fixed
      >
      </el-table-column>
      <el-table-column
          prop="serOrder.cname"
          label="客户姓名"
          width="140"
      >
      </el-table-column>
      <el-table-column
          prop="serOrder.gname"
          label="商品名称"
          width="140"
      >
      </el-table-column>
      <el-table-column
          prop="acreatetime"
          label="创建时间"
          width="180"
      >
      </el-table-column>
      <el-table-column
          label="售后单状态"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.aflag===0">
            <el-tag>已解决</el-tag>
          </div>
          <div v-if="scope.row.aflag===1">
            <el-tag type="success">处理中</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.aflag===1">
            <el-button @click="popAppendMenu(scope.row)" type="primary" size="small">追加</el-button>
            <el-button @click="end(scope.row)" type="danger" size="small">结束</el-button>
            <el-button @click="prikaz(scope.row)" type="primary" size="small">查看详情</el-button>
          </div>
          <div v-if="scope.row.aflag===0">
            <el-button disabled type="success" size="small">工单已结束</el-button>
            <el-button @click="prikaz(scope.row)" type="primary" size="small">查看详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3,5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--    追加-->
    <el-dialog
        title="追加"
        :visible.sync="appendFlag"
        width="50%"
        :before-close="handleClose">
      <el-descriptions class="margin-top" title="工单信息" :column="6" direction="vertical" border>
        <el-descriptions-item label="订单UID">{{ Object.assign({}, detailMsg.serOrder).ouid }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ Object.assign({}, detailMsg.serOrder).gname }}</el-descriptions-item>
        <el-descriptions-item label="订单描述">{{ Object.assign({}, detailMsg.serOrder).odesc }}</el-descriptions-item>
        <el-descriptions-item label="消费者名称">{{ Object.assign({}, detailMsg.serOrder).cname }}</el-descriptions-item>
        <el-descriptions-item label="消费者售后消息">
          <div v-if="detailMsg.acmsg!=null">{{detailMsg.acmsg}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="商家售后消息">
          <div v-if="detailMsg.asmsg!=null">{{detailMsg.asmsg}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="处理流程">
          <div v-if="this.detailMsg.statusMsg!=null && this.detailMsg.statusMsg.length>0">
            <el-timeline :reverse="false">
              <el-timeline-item
                  v-for="(activity, index) in detailMsg.statusMsg"
                  :key="index"
                  :timestamp="activity.astime">
                {{ activity.asmsg }}
              </el-timeline-item>
            </el-timeline>
          </div>
          <div v-else>
            <el-empty description="暂无信息"></el-empty>
          </div>
          <el-form :model="appendMsg" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="追加信息" prop="asmsg">
              <el-input v-model="appendMsg.asmsg" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="append('userMsg')">提交</el-button>
              <el-button @click="handleClose">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--    查看详情的弹窗-->
    <el-dialog
        title="详情"
        :visible.sync="detailedFlag"
        width="50%"
        >
      <el-descriptions class="margin-top" title="工单详情" :column="5" direction="vertical" border>
        <el-descriptions-item label="订单UID">{{ Object.assign({}, detailMsg.serOrder).ouid }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ Object.assign({}, detailMsg.serOrder).gname }}</el-descriptions-item>
        <el-descriptions-item label="订单描述">{{ Object.assign({}, detailMsg.serOrder).odesc }}</el-descriptions-item>
        <el-descriptions-item label="消费者名称">{{ Object.assign({}, detailMsg.serOrder).cname }}</el-descriptions-item>
        <el-descriptions-item label="商品价格">
          ￥{{ Object.assign({}, detailMsg.serOrder).oprice }}
        </el-descriptions-item>
        <el-descriptions-item label="处理流程">
          <div v-if="this.detailMsg.statusMsg!=null && this.detailMsg.statusMsg.length>0">
            <el-timeline :reverse="false">
              <el-timeline-item
                  v-for="(activity, index) in detailMsg.statusMsg"
                  :key="index"
                  :timestamp="activity.astime">
                {{ activity.asmsg }}
              </el-timeline-item>
            </el-timeline>
          </div>
          <div v-else>
            <el-empty description="暂无信息"></el-empty>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "usermenu",
  data() {
    return {
      // 用户数据
      alterSaleMsgs: [],

      // 分页数据
      pageIndex: 1,
      pageSize: 5,
      total: 0,

      // 修改的标记
      appendFlag: false,
      detailedFlag: false,
      // 要被添加的用户信息
      orderMsg: {},
      // 搜索的条件
      searchMsg: {},
      // 查看详情的信息
      detailMsg: {},
      // 追加的消息
      appendMsg:{
        asmsg:"",
        aid:-1,
      }
    };
  },
  // 页面初始化方法
  created() {
    this.flushPage()
  },
  methods: {
    // 分页的方法，当页面大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.flushPage()
    },
    // 当页面下标改变
    handleCurrentChange(val) {
      this.pageIndex = val
      this.flushPage()
    },

    // 结束工单
    end(row) {
      this.$http.post("/AfterSale/End",row).then(resp=>{
        console.log(row)
        if (resp.data.code === 2000) {
          this.$notify({
            title: "消息",
            message: "更新成功",
            duration: 4000
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '更新失败'
          });
        }
        this.flushPage()
      })
    },
    // 弹出追加的窗口
    popAppendMenu(row){
      this.$http.get("/AfterSale/GetStatus/" + row.aid).then(resp => {
        this.detailMsg = JSON.parse(JSON.stringify(row))
        this.detailMsg.statusMsg = resp.data.data
        this.appendFlag = true
        this.appendMsg.aid=row.aid
      })
    },
    // 追加工单
    append() {
      this.$http.post("/AfterSale/Append", this.appendMsg).then(resp => {
        if (resp.data.code === 2000) {
          this.$notify({
            title: "消息",
            message: "更新成功",
            duration: 4000
          })
          this.flushPage()
        } else {
          this.$notify.error({
            title: '错误',
            message: '更新失败'
          });
          this.flushPage()
        }
      })
      this.handleClose()

    },
    // 查看详情
    prikaz(row) {
      this.$http.get("/AfterSale/GetStatus/" + row.aid).then(resp => {
        this.detailMsg = JSON.parse(JSON.stringify(row))
        this.detailMsg.statusMsg = resp.data.data
        console.log(this.detailMsg)
        this.detailedFlag = true
        console.log(Object.assign({}, this.detailMsg).statusMsg)
      })
    },
    // 对话框关闭之后
    handleClose() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
      this.appendFlag = false
      this.appendMsg.asmsg=""
    },

    resetForm() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
    },
    // 重置搜索菜单
    restSearch() {
      this.$nextTick(() => {
        this.$refs['searchFrom'].resetFields();
      })
    },
    // 执行搜索方法
    search() {
      this.$http.post("/AfterSale/GetMegs", this.searchMsg).then(resp => {
        this.alterSaleMsgs = resp.data.data
      })
    },
    // 刷新页面的方法
    flushPage() {
      // 获取全部的用户信息
      this.$http.get("/AfterSale/List/" + this.pageIndex + "/" + this.pageSize).then(resp => {
        console.log(resp.data.data)
        // 放入用户信息
        this.alterSaleMsgs = resp.data.data.records;
        // 放入分页数据
        this.total = resp.data.data.total
      })
    }
  }
}

</script>

<style scoped>

</style>
